<template>
  <div class="data-container">
    <h2>健康历史数据</h2>
    <table class="data-table">
      <thead>
        <tr>
          <th>时间</th>
          <th>血压</th>
          <th>血糖</th>
          <th>血氧</th>
          <th>BMI</th>
          <th>胆固醇</th>
          <th>心电图</th>
          <th>心率</th>
          <th>体温</th>
          <th>尿酸</th>
        </tr>
      </thead>
      <tbody>
        <!-- 使用 v-for 渲染每一条历史记录 -->
        <tr v-for="item in historicalData" :key="item.id">
          <td>{{ item.timestamp }}</td>
          <td>{{ item.blood_pressure }}</td>
          <td>{{ item.blood_sugar }}</td>
          <td>{{ item.bloodoxygen }}</td>
          <td>{{ item.bmi }}</td>
          <td>{{ item.cholesterol }}</td>
          <td>{{ item.heart }}</td>
          <td>{{ item.heart_rate }}</td>
          <td>{{ item.temperature }}</td>
          <td>{{ item.uricacid }}</td>
        </tr>
      </tbody>
    </table>
    <div v-if="historicalData.length === 0" class="no-data">
      没有找到历史数据。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      historicalData: [] // 用来存储历史数据
    };
  },
  created() {
    this.fetchHistoricalData();
  },
  methods: {
    // 假设我们从后端 API 获取数据
    async fetchHistoricalData() {
      try {
        // 模拟从 API 获取数据
        const response = await fetch('https://api.example.com/health-history');
        const data = await response.json();

        // 这里只取前10条数据，如果数据量更多可以分页加载
        this.historicalData = data.slice(0, 10);
      } catch (error) {
        console.error("获取数据失败", error);
      }
    }
  }
};
</script>

<style scoped>
.data-container {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.data-table th, .data-table td {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: left;
}

.data-table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

.data-table td {
  font-size: 14px;
}

.no-data {
  text-align: center;
  color: #777;
  font-size: 16px;
  margin-top: 20px;
}
</style>
